<template>
	<div id="box">
		<!-- 开头 -->
		   <div  class="one"> 
		    <ul  class="one_a" > 
		     <li style="margin-left:120px"><img src="@/assets/images/logo.jpg"></li> 
			 
			 <li style="margin-left:140px"><router-link to='/'>首页</router-link></li>
			 <li >|</li> 
			<li ><router-link to='/gy'>关于我们</router-link></li>
			 <li >|</li> 
			 <li ><router-link to='/jie'>解决方案</router-link></li>
			 
			 <li >|</li> 
			 <li ><router-link to='/jiShu'>技术服务</router-link></li> 
			 <li >|</li> 
			 <li><router-link to='/xw'>新闻中心</router-link></li>
			  <li>|</li>
			  <li><router-link to='/lx'>联系我们</router-link></li>
			 
		     
				 <li style="margin-left:120px"><img src="@/assets/images/tel.jpg" alt=""></li>
		    </ul> 
		   </div> 

		<!-- 轮播图 -->
		<div class="swiper-box">
		  <swiper ref="mySwiper" :options="swiperOptions">
		    <swiper-slide>
		      <img src="@/assets/images/banner1.jpg" alt="">
		    </swiper-slide>
		    <swiper-slide>
		      <img src="@/assets/images/banner2.png" alt="">
		    </swiper-slide>
		    <swiper-slide>
		      <img src="@/assets/images/banner3.png" alt="">
		    </swiper-slide>
		    <!-- 前后按钮 -->
		    <div class="swiper-button-prev"  slot="button-prev"></div>
		    <div class="swiper-button-next"  slot="button-next"></div>
		    <!-- 分页器 -->
		    <div class="swiper-pagination" slot="pagination"></div>
		  </swiper>
		</div>
		
		<!-- 第三部分 -->
		
		<div class="three">
			<div class="three-left" >
				<img src="@/assets/images/about_2.jpg" alt="">
			</div>
			<div class="three-right" style="margin-left:10px">
				<p style="font-size: 50px; text-align: center;">关于我们</p>
				<p style="font-size: 40px;text-align: center;"><img src="@/assets/images/bg.png" alt="">ABOUT US<img src="@/assets/images/bg.png" alt=""></p>
				<p style="font-size: 25px; ">昆山信息科技有限公司是一家专业从事电脑软件、网站及移动互联网软件开发与外包的服务性的高新技术企业。
				拥有一批长期专业从事软件开发、软件定制的专业人才，具有雄厚的技术开发实力，全方位满足政府与企业信息化需求，
				为客户提供专业化的ios、android、windows phone等移动平台软件开发，及服务器平台开发等行业解决方案。信息科技经过多年的经验积累，总结出了针对各行业、
				不同规模和不同阶段的企业信息化解决方案，我们的项目实施团队能够更加准确快捷地找出客户的具体需求，为您的企业度身定做真正切合实际需求的解决方案。
				我们实施方面多年的实践积累将为您的企业带来最大投资回报，已经为多家企事业单位提供了专业优质的服务，并受到了客户的一致好评。
				在客户服务方面，本着为客户服务的思想，设立了24小时产品咨询电话、24小时售后技术支持电话等多个无障碍通道，为客户提供了高质量的售前和售后的服务。
				</p>
				
			</div>
		</div>
		
		<!-- 第四部分 -->
		<div class="four">
			<div class="four-left" >
				<img src="@/assets/images/yw1.png" alt="" style="margin-top: 50px;">
				<br>
				<img src="@/assets/images/yw2.png" alt="" style="margin-top: 120px;">
				<br>
				<img src="@/assets/images/yw3.png" alt="" style="margin-top: 90px;">
			</div>
			<div class="four-center" >
				<h1 style="margin-top: 50px;">主营业务：</h1>
				<p>软件外包、软件定制开发、OA办公系统、手机APP定制、微信开发、网站
				开发设计、100%个性化定制，及IT/电子类产品销售等等
				</p>
				<h1 style="margin-top: 90px;">提供服务：</h1>
				<p>网络推广及提供符合软件整个开发生命周期的过程服务等。</p>
				<h1 style="margin-top: 60px;">服务理念：</h1>
				<p>技术为本，服务制胜，客户的感动源于我们高度的责任感、敬业精神与专业
				
				素质。帮助客户不断创造价值，才能实现自身兼职的升华。</p>
			</div>
			<div class="four-right"></div>
		</div>
		
		<!-- 第五部分 -->
		<div class="five">
			<div class="five-top">
				<h1>技术服务</h1>
				<h3><img src="@/assets/images/bg.png" alt="">TECHNICAL SERVICE<img src="@/assets/images/bg.png" alt=""></h3>
			</div>
			<div class="five-center">
				<ul>
					<li><img src="@/assets/images/phone.png" alt=""></li>
					<li><img src="@/assets/images/wx.png" alt=""></li>
					<li><img src="@/assets/images/qianru.png" alt=""></li>
					<li><img src="@/assets/images/ds.png" alt=""></li>
					<li><img src="@/assets/images/erp.png" alt=""></li>
					<li><img src="@/assets/images/mg.png" alt=""></li>
				</ul>
			</div>
			<div class="five-bot">
				<ul>
					<li>移动应用开发</li>
					<p></p>
					<li>微信平台开发</li>
					<p></p>
					<li>嵌入式开发</li>
					<p></p>
					<li>电子商务开发</li>
					<p></p>
					<li>ERP/CRM/CM</li>
					<p></p>
					<li>美工设计</li>
					<p></p>
				</ul>
			</div>
			<div class="bott">
				<ul>
					<li>ios、Android、Windows phone、Windows CE解决方案提供与开发</li>
					<li >提供微信平台的高级定制开发，针对企业内部现有平台接口的对接与开发</li>
					<li >智能交通领域的软硬件通讯产品，蓝牙(BLE)/Wifi/USB/串口通讯等激流设备</li>
					<li >B2B、B2C、C2C、B2B2C模式，集销售、支付（银联/支付宝/微信）、管理于一体的平台开发</li>
					<li>企业应用领域的ERP、CRM、CMS、EHR平台开发（C/S、B/S架构）</li>
					<li>APP UI、Web UI的交互设计及游戏原画的设计</li>
				</ul>
			</div>
		</div>
		<!-- 第六部分 -->
		<div class="six">
			<div class="six-top">
				<h1 >我们的案例</h1>
				<h3><img src="@/assets/images/bg.png" alt="">TECHNICAL SERVICE<img src="@/assets/images/bg.png" alt=""></h3>
			</div>
			<div class="six-center">
				<ul>
					<li><img src="../assets/images/anli1.jpg" alt=""></li>
					<li><img src="../assets/images/anli2.jpg" alt=""></li>
					<li><img src="../assets/images/anli3.jpg" alt=""></li>
				</ul>
			</div>
			<div class="cen">
				<ul>
					<li><img src="../assets/images/anli4.jpg" alt=""></li>
					<li><img src="../assets/images/anli5.jpg" alt=""></li>
					<li><img src="../assets/images/anli6.jpg" alt=""></li>
				</ul>
			</div>
		</div>
		
		<!-- 第七部分 -->
		<div class="seven">
			<div class="left">
				<ul>
					<li style="list-style: none;font-weight: bold;background-color: #000000;"><img src="../assets/images/logo1.png" alt="">公司新闻</li>
					<li><a href="">各个地方媒体首页图片广告特价300元每月  02-03</a></li>
					<li><a href="">新浪首页论坛24小时热帖排行榜800元 02-03</a></li>
					<li><a href="">地方政府媒体一键打包代发150家媒体打包价880元 02-03</a></li>
					<li><a href="">超低价财经套餐12家媒体打包发布600元 02-03</a></li>
					<li><a href="">特价优惠媒体发稿包收录案例媒体参与 02-03</a></li>
				</ul>
			</div>
			<div class="right">
				<ul>
					<li style="list-style: none; font-weight: bold;background-color: #000000;"><img src="../assets/images/logo1.png" alt="">行业动态</li>
					<li><a href="">各个地方媒体首页图片广告特价300元每月  02-03</a></li>
					<li><a href="">新浪首页论坛24小时热帖排行榜800元 02-03</a></li>
					<li><a href="">地方政府媒体一键打包代发150家媒体打包价880元 02-03</a></li>
					<li><a href="">超低价财经套餐12家媒体打包发布600元 02-03</a></li>
					<li><a href="">特价优惠媒体发稿包收录案例媒体参与 02-03</a></li>
				</ul>
			</div>
		</div>
		
		<!-- 第八部分 -->
		<div class="eight">
			<img src="@/assets/images/ditu.jpg" alt="">
		</div>
		
		<!-- 第九部分 -->
		<div class="nine">
			<div class="top">
				<ul>
					<li style="margin-left:140px">首页</li>
					<li >|</li> 
					<li>关于我们</li> 
					<li >|</li> 
					<li >解决方案</li> 
					<li >|</li> 
					<li >技术服务</li> 
					<li >|</li> 
					<li>新闻中心</li>
					 <li>|</li>
					 <li>联系我们</li>
				</ul>
			</div>
			<div class="center">
				<p>联系我们</p>
				<p>信息科技有限公司</p>
				<p>Lnfomation Technology Co.,Ltd</p>
				<hr color="gray">
			</div>
			<div class="bot">
				<img src="@/assets/images/ft1.png" alt="">
				<img src="@/assets/images/ft2.png" alt="">
				<img src="@/assets/images/ft3.png" alt="">
				<ul>
					<li style="margin-left: 210px;">江苏省昆仑市</li>
					<li style="margin-left: 230px;">XXX@xxx.com</li>
					<li style="margin-left: 240px;">手机：XXXXXXXXXXX</li>
					<li><a href="">顶部</a></li>
				</ul>
			</div>
		</div>
	</div>
  
</template>

<script>
export default {
  name: 'LunBo',
  data () {
	  
    return {
        swiperOptions:{
          pagination:{
            el: '.swiper-pagination',
            clickable:true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          loop:true,
          autoplay:{
            stopOnlastSlide:true,
            autoplay:3000
          },
		  
		  
		  
        }
    }
  }
}
</script>

<style scoped>
	.box{
		width: 1900px;
		height: 6000px;
		margin:0 auto;
	
	}
	.one{
		width: 1900px;
		height: 200px;
		background-color: white;
			margin:0 auto;
	}
	.one a{
		color: gray;
	}
	.one ul{
		width: 1900px;
		height: 200px;
		list-style: none;
		text-align: center;
		line-height: 200px;
	}
	.one ul li{
		float: left;
		margin-right: 40px;
		font-size: 30px;
	}
	
  .swiper-box{
      height:715px;
  }
  .swiper-container{
    width:100%;
    height: 100%;
    text-align: center;
  }
  .swiper-container img{
    width:100%;
    height:100%;
  }
  .swiper-button-next, .swiper-button-prev{
    color:#f3f3f3;
  }
  /* .swiper-container <<< .swiper-pagination-bullet-active{
    background: #ffaa00 !important;
  } */
  
  .three{
	 
	  	display: flex;
	  	flex-direction: row;
	  	height: 500px;
	  	margin-bottom: 5px;
		
  }
  .three .three-left{
  	flex-basis:700px;
	width: 700px;
	height: 600px;
	margin: 200px 400px;
  }
  .three .three-left img{
	  width: 100%;
	  height: 100%;
  }
  .three .three-right{
  flex-basis:900px;
	align-self: baseline;
	
	margin: 200px auto;
  }
  
  .four{
		width: 100%;
		height: 600px;
  	  	display: flex;
  	  	flex-direction: row;
  	  	margin-bottom: 5px;
		background-image: url("../assets/images/yw.jpg");
		background-repeat: no-repeat;
		background-size: 100% 600px;
		margin: 400px 0;
  		
  }
  .four .four-left{
  	flex:1;
  	width: 200px;
  	height: 600px;
	margin: 0px 100px;
  }
  .four .four-left img{
  	  width: 60%;
  	  height: 10%;
  }
  .four .four-center{
  flex:3;
  	align-self: baseline;
  	margin: 0px 100px;
	color: white;
  }
  .four .four-right{
  flex:7;
  	width: 200px;
  	height: 600px;
  }
  
  .five{
	  width: 1900px;
	  height: 600px;
	  margin: -350px auto;
  }
  .five .five-top{
	  text-align: center;
	  
  }
  .five-center{
	  width: 1900px;
	  height: 150px;
  }
  .five-center ul{
  	  width: 1900px;
  	  height: 150px;
	  list-style: none;
	 
  }
  .five-center ul li{
  	  width: 250px;
  	  height: 150px;
	   float: left;
	   margin-left: 48px;
	   margin-top: 40px;
  }
  .five-bot{
  	  width: 1900px;
  	  /* height: 200px; */
  }
  .five-bot ul{
  	  width: 1900px;
  	  /* height: 200px; */
  	  list-style: none;
  	 
  }
  .five-bot ul li{
  	  width: 300px;
  	  /* height: 200px; */
  	   float: left;
	   margin-left: 10px;
	   font-weight: bold;
  }
  .bott{
  	  width: 1900px;
  	  /* height: 200px; */
  }
  .bott ul{
  	  width: 1900px;
  	  /* height: 200px; */
  	  list-style: none;
  	 
  }
  .bott ul li{
  	  width: 300px;
  	  /* height: 200px; */
  	   float: left;
	    margin-right: 6px;
  }
  
  .six{
  	width: 100%;
  	height: 1200px;
	  background-image: url("../assets/images/js.jpg");
	  background-repeat: no-repeat;
	  background-size:  100% 1200px;
	   margin: 200px auto;
  	  
  }
  .six .six-top{
  	  text-align: center;
  }
  .six .six-center{
	  width: 1500px;
	  height: 20px;
	  text-align: center;
	  margin: 0 auto;
  }
  .six .six-center ul{
  	  width: 1900px;
  	  height: 20px;
  	  list-style: none;
	  margin-top: 200px;
  }
  .six .six-center ul li{
  	  width: 500px;
  	  height: 20px;
  	  float: left;
	  margin-left: 10px;
  }
  .six .six-center ul li img{
  	  width: 500px;
  	  height: 400px;
  }
  .six .cen{
  	  width: 1500px;
  	  height: 20px;
	 margin-top: 400px;
	 text-align: center;
	  margin: 300px auto;
  }
  .six .cen ul {
  	  width: 1900px;
  	  height: 20px;
  	  list-style: none;
	  
  }
  .six .cen ul li img{
	  width: 500px;
	  height: 400px;
	  margin-top: 120px;
	 
  }
  .six .cen ul li{
  	  width: 500px;
  	  height: 20px;
  	  float: left;
	  margin-left: 10px;
  }
  
  .seven{
	  width: 1900px;
	  height: 600px;
	  margin: 0 auto;
  }
  .seven a{
	  color: gray;
  }
  .seven .left{
	  float: left;
  }
  .seven .left ul {
	  width: 900px;
	  height: 50px;
  }
  .seven .left ul li{
	  width: 900px;
	  height: 100px;
	  /* text-align: center; */
	  line-height: 100px;
	 border-bottom:1px dotted black;
	  color: #FFFFFF;
	   font-size: 35px;
  }
  .seven img{
	  width: 50px;
	  height: 50px;
  }
  .seven .right{
	  float: right;
  }
  .seven .right ul {
  	  width: 900px;
  	  height: 50px;
  }
  .seven .right ul li{
  	  width: 900px;
  	  height: 100px;
  	  /* text-align: center; */
  	  line-height: 100px;
  	 border-bottom:1px dotted black;
	 color: #FFFFFF;
	 font-size: 35px;
  }
  .eight{
	  width: 100%;
	  height: 100%;
	  margin-top: 10px;
  }
  .eight img{
	  width: 100%;
	  height: 100%;
  }
  
  .nine{
	 
	 	width:100%;
	 	height: 800px;
	 	background-color: white;
		background-color: #000000;
		color: gray;
  }
  .nine .top{
	  width: 1500px;
	  height: 400px;
	  margin: 10px auto;
	  line-height: 400px;
  }
  .nine .top ul{
  	width: 1900px;
  	/* height: 100px; */
  	list-style: none;
  	
  }
  .nine .top  ul li{
  	float: left;
  	margin-right: 40px;
  	font-size: 30px;
  } 
  .nine .center{
	  width: 1500px;
	  height: 20px;
	  text-align: center;
	  margin: 0 auto;
  }
  .nine .bot{
	  width: 1500px;
	  height: 20px;
	  text-align: center;
	  margin: 200px auto;
  } 
  .nine .bot img{
	  margin-right: 300px;
  }
  .nine .bot ul{
  	  width: 1500px;
  	  height: 20px;
  	  text-align: center;
  	  list-style: none;
	 
  } 
  .nine .bot ul li{
	 
	  float: left;
  } 
  .nine .bot  ul li a{
	  display: block;
	      width: 100px;
	      height: 100px;
	      line-height: 100px;
	      text-align: center;
	      font-size: 12px;
	      color: red;
		  border: 5px solid red;
		  margin-left: 350px;
  }
</style>
